<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <style>
        .nav {
            /*  背景颜色  */
            background-color: black;
            /*  li 去掉点  */
            list-style: none;
            /*  设置总导航栏宽度  */
            width: 1200px;
            height: 60px;
            /*  水平居中  */
            /*0:上边距和下边距为0*/
            /*auto:左边距和右边距为自动*/
            margin: 0 auto;
            padding: 0;
        }

        .nav > li {
            /*  浮动  */
            float: left;
            width: 16.6%;
        }

        .nav > li:hover {
            background-color: blue;
        }

        .nav a {
            /*  去掉超链接下划线  */
            text-decoration: none;
            /*  设置为块状元素  */
            display: block;
            /*  设置 a 占据 li 的 100% 宽度  */
            width: 100%;
            /*  文字居中  */
            text-align: center;
            /*  上下内边框  */
            padding: 5px 0;
            color: gray;
            font-weight: bold;
            margin: 10px;
        }

    </style>
</head>
<body>
<ul class="nav">
    <li><a href="javascript:void(0)">首页</a></li>
    <li><a href="javascript:void(0)">手机</a></li>
    <li><a href="javascript:void(0)">电脑</a></li>
    <li><a href="javascript:void(0)">男装</a></li>
    <li><a href="javascript:void(0)">女装</a></li>
    <li><a href="javascript:void(0)">零食</a></li>
</ul>
</body>
</html>